<template>
  <div class="w-full">
    <ProTable
      ref="tableRef"
      :fetchListApi="_fetchList"
      :columns="columns"
      row-key="id"
    >
      <template #modelAlwaysVOS="{ record }">
        <Tree
          v-if="record.modelAlwaysVOS && record.modelAlwaysVOS.length"
          :tree-data="record.modelAlwaysVOS"
          :field-names="fileNames"
        />
      </template>
      <template #operation="{ record }">
        <b-button
          type="link"
          @click="onSelect(record)"
          code="firmwareVersion:edit"
        >
          选择
        </b-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { Select, SelectOption, Tree, TreeProps } from 'ant-design-vue';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { appUpdateTypeEnum } from '@/constant/push';
import { getAuditData } from '@/api/push';

const tableRef = ref();
const type = ref('1');
const _fetchList = async (params: any) => {
  const res = await getAuditData({
    ...params,
  });
  type.value = params.type;
  res.rows.forEach((item: any) => {
    if (item.modelAlwaysVOS) {
      item.modelAlwaysVOS.forEach((model: any) => {
        model.typeName = `${model.typeName}(${model.modeName.length})`;
        model.modeName = model.modeName.map((name: any) => {
          return {
            typeName: name,
          };
        });
      });
    }
  });
  return { rows: [...res.rows], total: res.total || 0 };
};
const fileNames: TreeProps['fieldNames'] = {
  title: 'typeName',
  children: 'modeName',
};

const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '版本类型',
    dataIndex: 'type',
    hideInTable: true,
    defaultValue: '1',
    customSearchRender(state) {
      return (
        <Select v-model:value={state.type}>
          <SelectOption value='1'>软件版本</SelectOption>
          <SelectOption value='2'>固件版本</SelectOption>
        </Select>
      );
    },
  },
  {
    title: type.value == '1' ? '软件版本ID' : '固件版本ID',
    dataIndex: 'code',
    hideInSearch: true,
  },
  {
    title: type.value == '1' ? '软件包版本' : '固件包版本',
    dataIndex: 'mainVersionShow',
    hideInSearch: true,
  },
  {
    title: '更新类型',
    dataIndex: 'appUpdateType',
    valueEnum: appUpdateTypeEnum,
  },
  {
    title: '设备型号',
    dataIndex: 'modelAlwaysVOS',
    hideInSearch: true,
  },

  {
    title: type.value == '1' ? '待升级软件版本' : '待升级固件版本',
    dataIndex: 'version',
    hideInSearch: true,
    customRender({ record }) {
      return (
        <span>{record.appUpdateType == '1' ? '-' : `${record.version}`}</span>
      );
    },
  },
  {
    title: '版本说明',
    dataIndex: 'versionDesc',
    hideInSearch: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    hideInSearch: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    width: 100,
  },
]);

const emit = defineEmits(['select']);
const onSelect = (record: any) => {
  console.log(record);
  record.deviceType = type.value;
  emit('select', record);
};
</script>
